<template>
    <el-container>
        <el-main class="wrapper">
            <section class="panel cms-content">
                <div class="panel-body">
                    <el-form :model="form" ref="form" label-width="100px"
                             class="demo-ruleForm">
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="标题：" :rules="[{ required: true, message: '请填写学院标题', trigger: 'blur'}]" prop="title">
                                    <el-input v-model="form.title" placeholder="请填写标题"></el-input>
                                </el-form-item>
                                <el-form-item v-if="cates.length" label="类目：" prop="cateid" :rules="[{ required: true, message: '请选择类目', trigger: 'blur'}]">
                                    <el-select size="medium"  v-model="form.cateid">
                                        <el-option v-for="cate in cates" :key="cate.id" :label="cate.name"
                                                   :value="cate.id"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="18">
                                <el-form-item label="内容：" :rules="[{ required: true, message: '请填写内容', trigger: 'blur'}]" prop="content">
                                    <vue-neditor-wrap ref="mobile" v-model="form.content" @ready="ready"
                                                      :config="myConfig"
                                                      :destroy="false"></vue-neditor-wrap>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <div>
                            <el-button style="margin-left: 100px" type="primary" @click="update()">保存发布</el-button>
                            <el-button style="float: right;margin-right: 100px" type="primary" @click="goback()">返回列表</el-button>
                        </div>
                    </el-form>
                </div>
            </section>
        </el-main>
    </el-container>
</template>
<script>
    import {mapGetters} from 'vuex';
    import {PageInfo, PageUpdate,CateAll} from '@/utils/request';
    import VueNeditorWrap from 'vue-neditor-wrap';
    export default {
        components: {VueNeditorWrap},
        data() {
            return {
                myConfig: {
                    // 你的UEditor资源存放的路径,相对于打包后的index.html
                    UEDITOR_HOME_URL: '/NEditor/',
                    // 编辑器不自动被内容撑高
                    autoHeightEnabled: false,
                    // 初始容器高度
                    initialFrameHeight: 540,
                    // 初始容器宽度
                    initialFrameWidth: '100%',
                    // 关闭自动保存
                    enableAutoSave: false,
                    //关闭远程图片是否抓取到本地保存
                    catchRemoteImageEnable: false,
                    //是否启用元素路径，默认是显示
                    elementPathEnabled: false,
                    ////是否开启字数统计
                    wordCount: false,
                    //是否保持toolbar的位置不动,默认true
                    autoFloatEnabled: false
                },
                form: {
                    id: 0,
                    title: '',
                    content: '',
                    cateid: '',
                },
                editor: null,
                cates: [],
            }
        },
        activated() {
            this.$store.dispatch('setActive', '/page');
            this.category();
            this.form = {
                id: 0,
                title: '',
                content: '',
                cateid: '',
            };
        },
        computed: {
            ...mapGetters(['loading']),
        },
        methods: {
            // 列表
            category(){
                CateAll({params:{pid:1027}}).then((res)=>{
                    if (res.code) {
                        this.$message.error(res.msg);
                    } else {
                        this.cates = res.data;
                    }
                })
            },
            ready(editor) {
                this.editor = editor;
                if(this.$route.query.id){
                    this.info(this.$route.query.id);
                }else{
                    this.editor.setPlaceholder('请填写内容');
                }
            },
            info(id) {
                PageInfo({params: {id: id}}).then((res) => {
                    if(res.code){
                        this.$message.error(res.msg);
                    }else{
                        this.form = {
                            id: res.data.id,
                            title: res.data.title,
                            content: res.data.content,
                            cateid: res.data.cateid,
                        };
                    }
                });
            },
            goback() {
                this.$router.push({name: 'Page'})
            },
            //更新
            update() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        PageUpdate(this.form).then((response) => {
                            if (response.code) {
                                this.$message.error(response.msg);
                            } else {
                                this.$message({
                                    type: 'success',
                                    duration: '1000',
                                    message: response.msg,
                                    onClose: () => {
                                        this.$router.push({name: 'Page'})
                                    }
                                });
                            }
                        });
                    }
                });

            },
        },
    }
</script>
